<template>
  <div id="toolsview">
    <mt-header fixed title="工具"></mt-header>
    <div id="fillBlank"></div>
    <grid :items="items" :onClick="onClickGrid"></grid>
    <card
      class="card"
      v-if="data.length"
      v-for="(item, index) in showData"
      :key="index"
      @click.native="onClickCard(index)"
      :data="item">
    </card>
    <div class="tips" v-if="!data.length">没有新消息。</div>
    <router-link v-if="data.length" id="moreNotices" to="/modules/notices">查看更多</router-link>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import grid from '@/components/modules/grid'
// import storage from '@/libs/storage'
import fetch from '@/libs/fetch'
import card from './modules/card'

export default {
  data(){
    return {
      items: [
        {icon: require('./images/1.png'), name: '通知', path: '/modules/notices'},
        {icon: require('./images/2.png'), name: '成绩', path: '/modules/grades'},
        {icon: require('./images/3.png'), name: '考表', path: '/modules/tests'},
        {icon: require('./images/4.png'), name: '更多', path: '/modules/more'}
      ],
      data: []
    }
  },
  computed:{
    ...mapGetters([
      'getNotices'
    ]),
    showData(){
      return this.data.slice(0, 9);
    }
  },
  components:{
    grid,
    card
  },
  methods: {
    onClickGrid(item){
      // console.log('grid click',item);
      this.$router.push({path: item.path});
    },
    onClickCard(data){
      console.log('card click',data);
      this.$router.push({path: `/modules/noticedetail/${data}`});
    },
    fetchData(){
      fetch.post({
        url: '/lookMessage',
        success: (res) => {
          console.log('lookMessage',res);
          this.fmtData(res.data.data || []);
        },
        error: (e) => {
          console.error(e);
          this.fmtData([]);
        }
      })
    },
    fmtData(data) {
      let i = 0;
      for(i = 0; i < data.length; i++){
        data[i].isNew = true;
        data[i].level = data[i].jiBie;
      }
      this.data = data;
      // console.log(this.data);
      this.$store.commit('setNotices', this.data);
    }
  },
  mounted(){
    if(this.getNotices.length){
      this.data = this.getNotices;
    }else{
      this.fetchData();
    }
  }
}
</script>

<style scoped>
#toolsview{
  padding-bottom: 70px;
}
#fillBlank{
  height: 50px;
}
.card{
  margin-top: 10px;
}
#moreNotices{
  display: block;
  width: 100%;
  padding: 10px 0 0 0;
  text-align: center;
  text-decoration: none;
  color: #ccc;
}
.tips{
  width: 100%;
  margin: 10px 0;
  text-align: center;
}
</style>
